/*
 * @Author: HuangYue
 * @Date: 2022-05-07 15:15:29
 * @LastEditors: HuangYue
 * @LastEditTime: 2022-05-07 17:48:38
 * @FilePath: /graduation/src/pages/DataVisualization/Welcome/ProportionSales.jsx
 * @Description:
 */
import { Card, Radio, Typography } from 'antd';
import { Pie } from '@ant-design/plots';

import React from 'react';
import styles from './style.less';
const { Text } = Typography;

const ProportionSales = ({
  dropdownGroup,
  salesType,
  loading,
  salesPieData,
  handleChangeSalesType,
}) => {
  return (
    <Card
      loading={loading}
      className={styles.salesCard}
      bordered={false}
      title="设备类别占比"
      style={{
        height: '100%',
      }}
      // extra={
      //   <div className={styles.salesCardExtra}>
      //     {dropdownGroup}
      //     <div className={styles.salesTypeRadio}>
      //       <Radio.Group value={salesType} onChange={handleChangeSalesType}>
      //         <Radio.Button value="all">全部渠道</Radio.Button>
      //         <Radio.Button value="online">线上</Radio.Button>
      //         <Radio.Button value="stores">门店</Radio.Button>
      //       </Radio.Group>
      //     </div>
      //   </div>
      // }
    >
      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <Text>设备种类</Text>
        <Pie
          forceFit
          height={340}
          radius={0.8}
          angleField="y"
          colorField="x"
          data={salesPieData}
          legend={{
            visible: false,
          }}
          label={{
            visible: true,
            type: 'spider',
            formatter: (text, item) => {
              // eslint-disable-next-line no-underscore-dangle
              return `${item._origin.x}`;
            },
          }}
          statistic={{
            totalLabel: '设备种类',
          }}
        />
      </div>
    </Card>
  );
};
export default ProportionSales;
